<template>
  <div class="challenge-overview">
    <div class="challenge-overview-left">
      <div :class="['challenge-cover-container', getCoverClass()]">
        <span :class="['status-tag', getStatusClass()]">{{ getStatusText() }}</span>
      </div>
    </div>
    
    <div class="challenge-overview-right">
      <h1 class="challenge-title">{{ challenge.title }}</h1>
      
      <div class="challenge-info-grid">
        <div class="info-item">
          <span class="info-label">类型：</span>
          <span class="info-value">{{ challenge.category }}</span>
        </div>
        
        <div class="info-item">
          <span class="info-label">难度：</span>
          <span class="info-value">{{ getDifficultyText() }}</span>
        </div>
        
        <div class="info-item">
          <span class="info-label">状态：</span>
          <span :class="['info-value', 'status-' + getStatusValue()]">
            {{ getStatusText() }}
          </span>
        </div>
        
        <div class="info-item">
          <span class="info-label">开始时间：</span>
          <span class="info-value">{{ challenge.startTime }}</span>
        </div>
        
        <div class="info-item">
          <span class="info-label">结束时间：</span>
          <span class="info-value">{{ challenge.endTime }}</span>
        </div>
      </div>
      
      <div class="challenge-description-box">
        <h3 class="section-title">任务描述</h3>
        <p class="description-text">{{ challenge.description }}</p>
      </div>
      
      <div class="challenge-progress">
        <h3 class="section-title">进度</h3>
        <div class="progress-container">
          <div class="progress-bar" :style="{ width: challenge.progress + '%' }"></div>
        </div>
        <p class="progress-text">
          已坚持{{ challenge.currentDay }}天，剩余{{ challenge.totalDays - challenge.currentDay }}天（总计{{ challenge.totalDays }}天）
        </p>
      </div>
      
      <div class="challenge-reward">
        <span class="reward-badge">🏆</span>
        <span>完成可得 {{ challenge.pointsReward }} 积分</span>
      </div>
      
      <div class="challenge-participants">
        <div class="avatar-group">
          <div 
            v-for="(avatar, index) in challenge.participants.avatars" 
            :key="index" 
            class="avatar" 
            :style="{ backgroundImage: `url(${avatar})` }"
          ></div>
        </div>
        <span>已有 {{ challenge.participants.count }} 人参与</span>
      </div>
      
      <div class="challenge-actions">
        <button class="btn btn-primary" @click="handleParticipate">
          {{ challenge.isParticipating ? '每日打卡' : '参与挑战' }}
        </button>
        <button class="btn btn-outline" @click="handleShare">分享挑战</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChallengeOverview',
  props: {
    challenge: {
      type: Object,
      required: true,
      validator: function(obj) {
        return obj.id && obj.title && obj.status;
      }
    }
  },
  methods: {
    // 获取状态样式类
    getStatusClass() {
      switch (this.challenge.status) {
        case 'ongoing':
          return 'status-ongoing';
        case 'completed':
          return 'status-completed';
        case 'upcoming':
          return 'status-upcoming';
        case 'expired':
          return 'status-expired';
        default:
          return 'status-ongoing';
      }
    },
    
    // 获取状态背景类
    getCoverClass() {
      if (this.challenge.status === 'ongoing') return 'green-gradient';
      if (this.challenge.status === 'completed') return 'blue-gradient';
      if (this.challenge.status === 'upcoming') return 'orange-gradient';
      return 'purple-gradient';
    },

    // 获取状态文本
    getStatusText() {
      switch (this.challenge.status) {
        case 'ongoing':
          return '进行中';
        case 'completed':
          return '已完成';
        case 'upcoming':
          return '即将开始';
        case 'expired':
          return '已过期';
        default:
          return '进行中';
      }
    },
    
    // 获取状态值用于CSS类
    getStatusValue() {
      if (this.challenge.taskStatus !== undefined) return this.challenge.taskStatus;
      
      switch (this.challenge.status) {
        case 'ongoing': return 1;
        case 'completed': return 2;
        case 'upcoming': return 0;
        case 'expired': return 3;
        default: return 1;
      }
    },

    // 获取难度文本
    getDifficultyText() {
      switch (this.challenge.difficulty) {
        case 1:
          return '简单';
        case 2:
          return '中等';
        case 3:
          return '困难';
        default:
          return '简单';
      }
    },
    
    // 事件处理方法
    handleParticipate() {
      this.$emit('participate');
    },
    
    handleShare() {
      this.$emit('share');
    }
  }
}
</script>

<style>
/* 使用全局样式，不用scoped */
@import '../../styles/Challenge.css';

/* 组件特定样式，可以从Challenge.css中导入或在这里定义 */
</style> 